<template>
	<!-- 个人页面的布局 -->
	<view class="userLayout pageBackground">
		<!-- 用户信息区域 -->
		<view class="userInfo">
			<!-- 头像 -->
			<view class="avator">
				<image src="/static/images/logo.jpg" mode="aspectFill"></image>
			</view>
			<view class="username">你好,{{user.userName}}</view>
			<view class="address">欢迎第{{user.loginTimes}}次数登陆 </view>
		</view>
		<!-- 其他信息区域 -->
		<view class="section">
			<view class="list">
				<!-- 个人信息 -->
				<navigator class="row" url="/pages/sys_user/sys_user">
					<view class="left">
						<uni-icons type="person" size="28" color="#004fff"></uni-icons>
						<view class="text">个人信息</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="16" color="#aaa"></uni-icons>
					</view>
				</navigator>
				<!-- 联系客服 -->
				<view class="row">
					<view class="left">
						<uni-icons type="chat" size="28" color="#004fff"></uni-icons>
						<view class="text">联系客服</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="16" color="#aaa"></uni-icons>
					</view>
					<!-- 隐藏的按钮出发contact -->
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="contact">联系客服</button>
					<!-- #endif -->
					<!-- #ifdef !MP-WEIXIN -->
					<button @click="clickContact">拨打电话</button>
					<!-- #endif -->
				</view>
				<view class="row" @click="onLogout">
					<view class="left">
						<uni-icons type="redo" size="28" color="#004fff"></uni-icons>
						<view class="text">退出登陆</view>
					</view>
					<view class="right">
						<uni-icons type="right" size="16" color="#aaa"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="list">
				<navigator class="row" url="/pages/sys_family/sys_family">
					<view class="left">
						<uni-icons type="home" size="28" color="#004fff"></uni-icons>
						<view class="text">家庭管理</view>
					</view>
					<view class="right">
						<view class="text">{{length.family}}</view>
						<uni-icons type="right" size="16" color="#aaa"></uni-icons>
					</view>
				</navigator>
				<navigator class="row" url="/pages/sys_room/sys_room">
					<view class="left">
						<uni-icons type="wallet" size="28" color="#004fff"></uni-icons>
						<view class="text">房间管理</view>
					</view>
					<view class="right">
						<view class="text">{{length.room}}</view>
						<uni-icons type="right" size="16" color="#aaa"></uni-icons>
					</view>
				</navigator>
				<navigator class="row" url="/pages/sys_equipment/sys_equipment">
					<view class="left">
						<uni-icons type="settings" size="28" color="#004fff"></uni-icons>
						<view class="text">设备管理</view>
					</view>
					<view class="right">
						<view class="text">{{length.equipment}}</view>
						<uni-icons type="right" size="16" color="#aaa"></uni-icons>
					</view>
				</navigator>
				<navigator class="row" url="/pages/sys_user_family/sys_user_family">
					<view class="left">
						<uni-icons type="link" size="25" color="#004fff"></uni-icons>
						<view class="text">家庭关系</view>
					</view>
					<view class="right">
						<view class="text">{{length.userFamily}}</view>
						<uni-icons type="right" size="16" color="#aaa"></uni-icons>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onShow } from "@dcloudio/uni-app"; // 生命周期函数
	import { readFamily } from "@/services/sysFamilyApi";
	import { readRoom } from "@/services/sysRoomApi";
	import { getEquipmentByUserId } from "@/services/sysEquipmentApi";
	import { getStore } from "@/utils/getToken";
	import { User } from "@/types/user";
	import { getUser } from "@/services/sysUserApi";
	import { readUserFamilyByUser } from "@/services/sysUserFamilyApi";

	let length = ref({
		room: 99,
		family: 99,
		equipment: 99,
		userFamily: 99
	})
	let user = ref<User>({})

	/**
	 * 联系我
	 */
	function clickContact() {
		uni.makePhoneCall({
			phoneNumber: "13867129833"
		})
	}

	/**
	 * 退出登陆的点击事件函数
	 */
	function onLogout() {
		uni.clearStorageSync()                         // 清空Storage
		uni.navigateTo({                               // 跳转到登陆页
			url: '/pages/login/login'
		})
	}

	onShow(() => {
		getUser(getStore('id'), '').then(res => {      // 两个可选参数,第一个参数是sysUserId,第二个是phoneNumber,可缺省
			user.value = res
		});
		readFamily(getStore('id')).then(res => {
			length.value.family = (res.data || []).length
		});

		readRoom(getStore('id')).then(res => {
			length.value.room = (res || []).length
		});
		getEquipmentByUserId(getStore('id')).then(res => {
			length.value.equipment = (res || []).length
		});
		readUserFamilyByUser(getStore('id')).then(res => {
			length.value.userFamily = (res || []).length
		})
	})
</script>

<style lang="scss" scoped>
	.userLayout {

		// 页面级的css
		.userInfo {
			// 用户区域的css
			display: flex; // 布局方式：弹性布局  
			align-items: center; // 横向居中
			justify-content: center; // 纵向居中
			flex-direction: column; // 竖向排列
			padding-top: 50rpx;
			;

			.avator {
				// 头像区域的css
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%; // 圆角
				overflow: hidden; // 父集加圆角必须能隐藏覆盖图像，否则无法盖住image

				// 内部的图像css
				image {
					// 充满整个avator
					width: 100%;
					height: 100%;
				}
			}

			.username {
				font-size: 44rpx;
				color: #333;
				margin-top: 20rpx;
				padding: 20rpx 0 5rpx; // 内边距，3个参数时：上20 左右0 下5
			}

			.address {
				font-size: 28rpx;
				margin-top: 20rpx;
				color: #555;

			}

			.section {}
		}

		.section {
			width: 690rpx;
			margin: 40rpx auto; // 两个参数 上下/左右
			border: 1px solid#eee;
			border-radius: 15rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);

			.list {
				.row {
					display: flex; // 一个row里面带了2个view，布局方式:弹性布局
					justify-content: space-between; // 左右两端对齐
					padding: 0 30rpx;
					height: 80rpx;
					border-bottom: 1px solid#eee;
					position: relative; // 相对定位(基准)和隐藏的button配套使用

					&:last-child {
						// 最后一行少一条底线
						border-bottom: 0;
					}

					.left {
						display: flex;
						align-items: center;

						.text {
							margin-left: 28rpx;
							font-size: 30rpx;
							font-family: PingFangSC-Regular, sans-serif;
							color: #333;
						}
					}

					.right {
						display: flex;
						align-items: center;

						.text {
							margin-right: 16rpx;
							font-size: 28rpx;
							color: #666;
						}
					}

					button {
						position: absolute; // 相对定位，下面是基准参数
						top: 0; // 左上对齐
						left: 0; // 左上对齐
						height: 100%; // 和父集同高
						width: 100%; // 和父集同宽
						opacity: 0; // 设置透明度为0
					}
				}
			}
		}
	}

	// 放在全局css中
	.pageBackground {
		// 渐变背景
		background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #beecd8 20%, #f4e2d8);
		min-height: 100vh;
	}
</style>